<template>
    <div class="netease-video" style="background-color: #FFE4E1;">
      <div class="header">
        <h2 style="border: 2px solid blue;">网易云视频</h2>
      </div>
      <div class="video-section">
        <h3>热门视频</h3>
        <div class="video-item">
          <div class="video-thumbnail">
            <img src="https://img.zcool.cn/community/017ce7576f79c10000018c1bf48f1b.jpg@1280w_1l_2o_100sh.jpg" alt="视频缩略图" width="120" height="120" />
          </div>
          <div class="video-details">
            <h4>《21 世纪最大的谎言》</h4>
            <p>老薛已经在我脑子里蹦一天了#薛之谦#演唱会 #dj 版我好像在哪见过你#神级现场#嗨翻全场</p>
          </div>
        </div>
        <div class="video-item">
          <div class="video-thumbnail">
            <img src="https://img.zcool.cn/community/017ce7576f79c10000018c1bf48f1b.jpg@1280w_1l_2o_100sh.jpg" alt="视频缩略图" width="120" height="120" />
          </div>
          <div class="video-details">
            <h4>《荣耀折叠屏发布》</h4>
            <p>世界上最轻薄的折叠屏</p>
          </div>
        </div>
      </div>
      <div class="category-section">
        <h3>视频分类</h3>
        <ul>
          <li>音乐 <button>点击进入</button></li>
          <li>电影 <button>点击进入</button></li>
          <li>电视剧 <button>点击进入</button></li>
          <li>综艺 <button>点击进入</button></li>
        </ul>
      </div>
      <div class="footer">
        <p>© 网易云 2024</p>
      </div>
    </div>
  </template>

  <script setup>

  </script>

  <style scoped>
.netease-video {
    padding: 20px;
  }

.header {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
  }

.video-section h3 {
    margin-top: 20px;
  }

.video-item {
    display: flex;
    margin-bottom: 20px;
  }

.video-thumbnail {
    width: 30%;
  }

.video-details {
    width: 70%;
    padding-left: 20px;
  }

.category-section h3 {
    margin-top: 20px;
  }

.category-section ul li {
    padding: 10px 0;
  }

.category-section ul li button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.footer {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
  }
  </style>
